<template>
	<MyPage title="报价计算">
		<view slot="right"><u-icon name="question-circle" color="#999" size="36" @click="questionShow=true"></u-icon></view>
		<view slot="gBody">
			<view class="head-title">{{title}}<u-icon name="edit-pen" color="#B00E0E" size="36" class="edit-icon" @click="editPopFun('title')"></u-icon></view>
			<view class="head-time">
				<u-checkbox v-model="orderObj.time.show" shape="circle" class="checked"></u-checkbox>
				<text class="txt" @click="timeShow=true">报价时间：{{orderObj.time.value}}<u-icon name="arrow-down-fill" color="#bbb" size="20" class="icon-arrow"></u-icon></text>
			</view>
			<u-calendar v-model="timeShow" mode="date" @change="timeChange"></u-calendar>
			<view class="table">
				<view class="thead tr">
					<view class="name">名称</view>
					<view class="price">单价</view>
					<view class="number">数量</view>
					<view class="count">总价</view>
				</view>
				<view class="tbody">
					<view
						class="data-list"
						v-for="(item, index) in dataList"
						:key="index"
					>
						<view class="type">{{item.type}}</view>
						<view
							class="list"
							v-for="(child, childIndex) in item.typeList"
							:key="childIndex"
						>
							<view class="tr">
								<view class="name">{{child.title}}</view>
								<view class="price">￥{{child.price}}</view>
								<view class="number">{{child.number}}</view>
								<view class="count">￥{{child.count}} <u-icon name="edit-pen" color="#B00E0E" size="28" class="edit-icon" @click="editListPopFun(index,childIndex)"></u-icon></view>
							</view>
							<view class="remark grey" v-if="child.specifications || child.parts">
								<text v-if="child.specifications" style="margin-right:30rpx">{{child.specifications}}</text>
								{{child.parts}}
							</view>
						</view>
					</view>
				</view>
				<view class="tfooter">总数量：33　 利润：￥15200　 总价：<text class="red font28">￥1481500</text></view>
			</view>
			<view class="split-line"></view>
			
			<view class="box-view">
				<view class="list-item">
					<u-checkbox v-model="orderObj.servicePrice.show" shape="circle" active-color="#B00E0E" class="checked"></u-checkbox>
					<view class="label">服务费：</view>
					<u-input v-model="orderObj.servicePrice.value" placeholder="请输入金额" maxlength="20" :trim="true" class="input" />
					<text class="txt">元</text>
				</view>
				<view class="list-item">
					<u-checkbox v-model="orderObj.freightPrice.show" shape="circle" active-color="#B00E0E" class="checked"></u-checkbox>
					<view class="label">邮　费：</view>
					<u-input v-model="orderObj.freightPrice.value" placeholder="请输入金额" maxlength="20" :trim="true" class="input" />
					<text class="txt">元</text>
				</view>
				<view class="list-item">
					<view class="label" style="width:165rpx;text-align:right;">是否优惠：</view>
					<radio-group @change="radioChange" class="radio-group">
						<label v-for="(item, index) in items" :key="item.value" class="label">
							<radio :value="item.value" :checked="index == current" color="#B00E0E" class="radio" />
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<u-form-item :label="current==1?'上调金额':'优惠金额'" label-width="220" v-if="current==2||current==1">
					<u-input type="number" input-align="right" :placeholder="current==1?'请输入需要上调的金额':'请输入需要优惠的金额'" v-model="discountPrice" style="font-size:28rpx" />
				</u-form-item>
			</view>
			<!-- 底部报价 -->
			<view class="footer">
				<view class="footer-box">
					<view class="compute-box">
						<u-icon name="rmb" color="#bbb" size="40" class="margin-right10"></u-icon>
						<text class="red">{{endPrice}}</text>
						利润：15200
					</view>
					<view class="btn red-bg" @click="btnSubmit">设置报价单</view>
				</view>
			</view>
			
			<!-- 帮助弹框 -->
			<u-modal title="温馨提示" confirm-text="我知道了" v-model="questionShow">
				<view class="pop-content">
					<p>1.复选框：勾选表示最终显示在报价单的海报中，不勾选则不显示。</p>
					<p>2.修改：点击修改图标可以对相应的标题、价格等进行修改，最终显示在报价单的海报中。</p>
					<p>3.利润计算规则：利润 = 总价-成本价*数量，不包含配件费用、服务费、运费，不显示在海报中！</p>
				</view>
			</u-modal>
			<!-- 改标题弹框 -->
			<u-popup mode="bottom" v-model="editPop">
				<view class="pop-box">
					<view class="title">修改标题</view>
					<u-form :model="titleForm" ref="popForm">
						<u-form-item labelWidth="120" label="标题">
							<u-input type="number" v-model="titleForm.title" placeholder="请输入标题" maxlength="30" :trim="true" />
						</u-form-item>
						<MyBtn title="保存" class="btn" @click="popSubmit"></MyBtn>
					</u-form>
				</view>
			</u-popup>
			<!-- 改价格弹框 -->
			<u-popup mode="bottom" v-model="editListPop">
				<view class="pop-box">
					<view class="title">修改价格</view>
					<u-form :model="popForm" ref="popForm">
						<u-form-item labelWidth="120" label="单价">
							<u-input type="number" v-model="popForm.price" placeholder="请输入单价" maxlength="10" :trim="true" />
							<text class="black" slot="right">元</text>
						</u-form-item>
						<u-form-item labelWidth="120" label="数量">
							<u-input type="number" v-model="popForm.number" placeholder="请输入数量" maxlength="10" :trim="true" />
						</u-form-item>
						<u-form-item labelWidth="120" label="总价">
							<u-input type="number" v-model="popForm.count" placeholder="请输入总价" maxlength="10" :trim="true" />
							<text class="black" slot="right">元</text>
						</u-form-item>
						<MyBtn title="保存" class="btn" @click="popSubmit"></MyBtn>
					</u-form>
				</view>
			</u-popup>
		</view>
	</MyPage>
</template>		

<script>
import mixin from "@/libs/mixin.js";
export default {
	mixins: [mixin],
	data() {
		return {
			title:'华为手机报价单',
			questionShow:false,
			editPop:false,
			titleForm:{
				title:''
			},
			timeShow:false,
			orderObj:{
				time: {value:'2022-09-30',show:false},
				servicePrice: {value:'',show:false},
				freightPrice: {value:'',show:false},
				remark: {value:'',show:false}
			},
			editListPop:false,
			popForm:{
				price:'4999',
				number:'5',
				count:'24995'
			},
			dataList:[
				{
					type:'华为mate',
					typeList:[
						{title:'mate9 pro', specifications:'象牙白 / 256g', parts:'支架 +20元', price:'4999', number:'5', count:'24995'},
						{title:'mate10保时捷版', specifications:'象牙白 / 256g', parts:'', price:'4999', number:'2', count:'24995'},
						{title:'mate20国色天香色-胡歌签名版本', specifications:'', parts:'', price:'4999', number:'1', count:'24995'},
						{title:'mate50 pro', specifications:'', parts:'', price:'4999', number:'5', count:'24995'}
					]
				},
				{
					type:'华为P系列',
					typeList:[
						{title:'P10定制版', specifications:'象牙白 / 256g', parts:'支架 +20元', price:'4999', number:'10', count:'24995'},
						{title:'mate10保时捷版', specifications:'象牙白 / 256g', parts:'', price:'4999', number:'5', count:'24995'},
						{title:'P50尊享版', specifications:'', parts:'', price:'4999', number:'5', count:'24995'}
					]
				}
			],
			current: 0,
			items: [
				{value: '0',name: '原价'},
				{value: '1',name: '上调',checked: 'true'},
				{value: '2',name: '优惠'}
			],
			endPrice: 1481500
		} 
	},
	onLoad() {
		//this.getData();
	}, 
	methods: {
		// 编辑标题
		editPopFun(type){
			this.titleForm.title = this.title;
			this.editPop = true;
		},
		//时间插件事件
		timeChange(e){
			this.orderObj.time.value = e.result;
		},
		// 编辑列表内容
		editListPopFun(index,childIndex){
			this.curIndex = index;
			this.curChildIndex = childIndex;
			this.editListPop = true;
		},
		//单项修改
		popSubmit(){
			this.dataList[this.curIndex].typeList[this.curChildIndex].name = this.popForm.name;
			this.dataList[this.curIndex].typeList[this.curChildIndex].number = this.popForm.number;
			this.dataList[this.curIndex].typeList[this.curChildIndex].count = this.popForm.count;
			this.form = {
				price:'',
				number:'',
				count:false
			}
			this.editListPop = false;
		},
		//是否优惠选项
		radioChange(evt){
			for (let i = 0; i < this.items.length; i++) {
				if (this.items[i].value === evt.detail.value) {
					this.current = i;
					break;
				}
			}
		},
		// 提交-去设置报价单
		btnSubmit(){
			this.$utils.navigateTo('/diy/goods-confirmation');
		}
	}
}
</script>

<style lang="scss" scoped>
/* public */
.edit-icon{
	margin-left:15rpx;
}
.checked /deep/ .u-checkbox__label{
	margin-right:8rpx;
}
.radio-group{
	white-space: nowrap;
	display:flex;
	.label{
		display:flex;
		align-items: center;
		margin-left:18rpx;
		.radio{
			transform:scale(0.7);
		}
	}
}
/* layout */
.pop-content{
	padding:12rpx 30rpx 0;
	font-size:28rpx;
	line-height: 1.7em;
	p{
		margin-top:10rpx;
	}
}
.head-title{
	margin:28rpx 30rpx 0;
	text-align: center;
	font-size:36rpx;
	line-height: 1.3em;
}
.head-time{
	color:#666;
	font-size:24rpx;
	margin-top:14rpx;
	text-align: center;
	.txt{
		.icon-arrow{
			margin-left:12rpx;
		}
	}
}
.table{
	.thead{
		margin-top:28rpx;
		padding:10rpx 0;
		background: #eee;
	}
	.tr{
		display: flex;
		justify-content: space-between;
		text-align: center;
		font-size:24rpx;
		.name{
			width:40%;
		}
		.price{
			width:20%;
		}
		.number{
			width:15%;
		}
		.count{
			width:25%;
		}
	}
	.data-list{
		padding-left:15rpx;
		line-height: 1.2em;
		.type{
			margin-top:20rpx;
			font-size:28rpx;
			font-weight: bold;
			border-left:6rpx #B00E0E solid;
			padding-left:14rpx;
		}
		.list{
			margin-left:20rpx;
			padding:16rpx 0;
			border-bottom: 1px #eee solid;
			.tr .name{
				font-size: 28rpx;
				text-align: left;
			}
			.remark{
				margin-top:5rpx;
				font-size:24rpx;
			}
		}
	}
	.tfooter{
		text-align: right;
		margin:20rpx 30rpx 15rpx 0;
		font-size:24rpx;
	}
}
.split-line{
	margin-top:30rpx;
	background: #f1f1f1;
	width:100%;
	height:12rpx;
	clear: both;
	overflow: hidden;
}
.box-view{
	padding:20rpx 30rpx 40rpx 30rpx;
	.list-item{
		display: flex;
		align-items: center;
		margin-bottom:25rpx;
		.input{
			width:400rpx;
			flex: none;
			border-bottom:1px #eee solid;
		}
	}
}
.footer{
	width:100%;
	height:100rpx;
	.footer-box{
		position:fixed;
		left:0;
		bottom:0;
		width:100%;
		height:100rpx;
		background: #fff;
		box-shadow: 0 0 30rpx rgba(0,0,0,.2);
		display: flex;
		justify-content: space-between;
		.compute-box{
			padding:18rpx 0 0 30rpx;
			font-size:26rpx;
			.red{
				margin:0 25rpx 0 0;
				font-size:40rpx;
			}
		}
		.btn{
			width:210rpx;
			height:100rpx;
			line-height:100rpx;
			text-align: center;
			font-size:30rpx;
		}
	}
}
</style>